<template>
  <base-panel>
    <template #header>
        <h3>新增预报记录</h3>
    </template>
    
    <div class="records-list">
      <div class="record-item" v-for="(record, index) in records" :key="index">
        <el-icon><Timer /></el-icon>
        <span class="time">{{ record.time }}</span>
        <span class="desc">{{ record.desc }}</span>
      </div>
    </div>
  </base-panel>
</template>

<script setup lang="ts">
import { Timer } from '@element-plus/icons-vue'
import BasePanel from '@/components/BasePanel.vue'

// 模拟数据
const records = [
  { time: '2021/10/05(05:13)', desc: '第177期 8K' },
  { time: '2021/10/05(05:13)', desc: '第176期 8K' },
  { time: '2021/10/05(05:12)', desc: '第175期 8K' },
  { time: '2021/10/05(05:12)', desc: '第174期 8K' }
]
</script>

<style lang="scss" scoped>

.records-list {
  .record-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);

    .el-icon {
      font-size: 16px;
      margin-right: 8px;
      color: #00ffff;
    }

    .time {
      margin-right: 12px;
    }

    .desc {
      color: #00ffff;
    }
  }
}
</style> 